<template>
  <div class="side">
    <div class="menu-list">
      <div
        :class="['menu-item', menu.key === currentMenu.key ? 'active' : '']"
        v-for="menu in menus"
        :key="menu.key"
        @click="jump(menu)"
      >
        <div class="text">{{ menu.name }}</div>
      </div>
    </div>
    <div class="sub-menu-list">
      <div
        :class="['menu-item-sub', sub.path === currentPath ? 'active' : '']"
        v-for="sub in currentMenu.children"
        :key="sub.key"
        @click="jump(sub)"
      >
        <span :class="['iconfont', 'icon-' + sub.icon]" v-if="sub.icon" />
        <span class="text">{{ sub.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Menu } from "@/type";
const router = useRouter();
const route = useRoute();

const menus: Array<Menu> = [
  {
    name: "首页",
    key: "main",
    icon: "",
    path: "/main/all",
    children: [
      { name: "全部", key: "all", icon: "", path: "/main/all" },
      { name: "视频", key: "video", icon: "", path: "/main/video" },
      { name: "音频", key: "radio", icon: "", path: "/main/radio" },
      { name: "图片", key: "image", icon: "", path: "/main/image" },
      { name: "文档", key: "document", icon: "", path: "/main/document" },
      { name: "其他", key: "other", icon: "", path: "/main/other" },
    ],
  },
  {
    name: "分享",
    key: "share",
    icon: "",
    path: "/share",
    children: [{ name: "分享记录", key: "share", icon: "", path: "/share" }],
  },
  {
    name: "回收站",
    key: "recycle",
    icon: "",
    path: "/recycle",
    children: [
      { name: "删除的文件", key: "recycle", icon: "", path: "/recycle" },
    ],
  },
  {
    name: "设置",
    key: "setting",
    icon: "",
    path: "/setting",
    children: [
      {
        name: "用户管理",
        key: "user",
        icon: "",
        path: "/setting/user",
      },
    ],
  },
];

const currentMenu = ref<Menu>({
  key: "",
  name: "",
  path: "",
  icon: "",
  children: [],
});
const currentPath = ref("");

const jump = (menu: Menu) => {
  if (!menu.path || menu.key === currentMenu.value.key) {
    return;
  }
  router.push(menu.path);
};

const setMenu = (code: string, path: string) => {
  let menu = menus.find((item) => {
    return item.key === code;
  });
  if (menu) {
    currentMenu.value = menu;
    currentPath.value = path;
  }
};

watch(
  () => route,
  (newVal) => {
    if (newVal.meta.key) {
      setMenu(newVal.meta.key as string, newVal.path);
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.side {
  display: flex;
  border-right: 1px solid #f1f2f4;

  .menu-list {
    height: calc(100vh - 56px);
    width: 80px;
    border-right: 1px solid #f1f1f4;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 6%);
    .menu-item {
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      padding: 20px 0;
      cursor: pointer;
      &:hover {
        background: #f3f3f3;
      }
      .iconfont {
        font-weight: normal;
        font-size: 28px;
      }
    }
    .active {
      .iconfont {
        color: #06a7ff;
      }
      .text {
        color: #06a7ff;
      }
    }
  }
  .sub-menu-list {
    width: 200px;
    padding: 20px 10px 0;
    position: relative;
    .menu-item-sub {
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      cursor: pointer;
      &:hover {
        background: #f3f3f3;
      }
    }
    .active {
      background: #eef9fe;
      .iconfont {
        color: #06a7ff;
      }
      .text {
        color: #06a7ff;
      }
    }
  }
}
</style>
